<template>
    <div class="PublishOrder">
        <div class="container f-row f-j-center f-a-center active-black" @click="isShowOrderType = true">
            <span style="margin-right: 0.2rem;">{{orderType}}</span><gy-icon font-name="icon-tubiaozhizuo-"/>
        </div>
        <div class="container">
            <input type="text" :placeholder="placeholder" v-model="amount">
        </div>
        <div class="f-row f-j-center f-a-center" style="padding: 0.3rem">
            <strong style="color: #582600;font-size: 0.3rem;">{{payTypesTitle}}</strong>
        </div>
        <div class="f-row f-j-between f-a-center payTypes">
            <div v-for="(item, index) in payTypes" :key="index" @click="payTypeSelect(index)" :class="{'active-black btn': true, 'active': item.active}">{{item.title}}</div>
        </div>
        <div class="bottom f-row f-j-center f-a-start">
            <div v-if="amount" class="submitButton" style="margin-top: 0.2rem;">{{submitBtnTitle}}</div>
            <div v-else class="unSubmit" style="margin-top: 0.2rem;">{{submitBtnTitle}}</div>
        </div>
        <yd-actionsheet :items="orderTypes" v-model="isShowOrderType" cancel="取消"></yd-actionsheet>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {NAV_BAR_INFO} from "@/store/MutationTypes";
import GyIcon from "@/components/GyIcon.vue";

/**
 * 挂单类型
 */
enum OrderType {
    sell = '出售订单',
    buy = '收购订单',
}

@Component({
    name: 'PublishOrder',
    components: {GyIcon}
})
export default class extends Vue {
    private orderType: OrderType = OrderType.sell;
    private isShowOrderType: boolean = false;
    private amount: number | null = null;
    private payTypes: any[] = [
        {title: '微信', active: true},
        {title: '支付宝', active: false},
        {title: '银行卡', active: false}
    ];
    private get orderTypes(): any[] {
        return [
            {label: '出售订单', callback: () => {
                this.orderType = OrderType.sell;
                }},
            {label: '收购订单', callback: () => {
                this.orderType = OrderType.buy
                }},
        ];
    }
    private get placeholder(): string {
        if (this.orderType === OrderType.sell) {
            return '输入出售数量';
        } else {
            return '输入收购数量';
        }
    }
    private get payTypesTitle(): string {
        if (this.orderType === OrderType.sell) {
            return '选择收款方式';
        } else {
            return '选择付款方式';
        }
    }
    private get submitBtnTitle(): string {
        if (this.orderType === OrderType.sell) {
            return '立即出售';
        } else {
            return '立即收购';
        }
    }
    private mounted(): void {
        let __this = this;
        this.$common.scrollToTop();
        this.$store.dispatch(NAV_BAR_INFO, {
            leftItem: {name: 'C2C', click: () => {
                __this.$router.push('/c2c');
                }}
        })
    }
    private payTypeSelect(index: number): void {
        this.payTypes[index].active = !this.payTypes[index].active;
    }
}
</script>

<style scoped lang="less">
.PublishOrder {
    padding: 0.2rem 0.3rem 1.8rem 0.3rem;
    & .container {
        background-color: white;
        border-radius: 0.1rem;
        padding: 0.3rem 0.2rem;
        margin-bottom: 0.2rem;
        color: #666666;
        & input {
            padding: 0.3rem;
            width: 6.3rem;
            border: none;
            text-align: center;
            background-color: #FAFAF7;
            border-radius: 0.1rem;
        }
    }
    & .payTypes {
        & .btn {
            width: 2.06rem;
            height: 0.96rem;
            border-radius: 0.1rem;
            background-color: white;
            color: #582600;
            text-align: center;
            line-height: 0.96rem;
            font-size: 0.3rem;
            border: 0.02rem solid #ffffff;
        }
        & .active {
            color: #3B83FF;
            border: 0.02rem solid #3B83FF;
        }
    }
    & .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.74rem;
        background-color: white;
        z-index: 2;
        &:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 1px;
            background-image: linear-gradient(
                    0deg,
                    transparent 61%,
                    rgba(0, 0, 0, 0.3) 100%
            );
        }
    }
}
</style>
